import { computed, defineComponent, ref } from 'vue';
import ButtonAlignment from './ButtonAlignment.vue';
import ButtonDesign from './ButtonDesign.vue';
import ButtonPadding from './ButtonPadding.vue';
import ButtonSize from './ButtonSize.vue';
import CustomColor from './CustomColor.vue';
import CustomContent from './CustomContent.vue';
import CustomRipple from './CustomRipple.vue';
import DeterministicProgress from './DeterministicProgress.vue';
import Disabled from './Disabled.vue';
import FormSubmission from './FormSubmission.vue';
import IndeterminateProgress from './IndeterminateProgress.vue';
import Links from './Links.vue';
import LinksWithGo from './LinksWithGo.vue';
import OtherOptions from './OtherOptions.vue';
import Round from './Round.vue';
import RouterLinkExample from './RouterLinkExample.vue';
import Square from './Square.vue';
import Standard from './Standard.vue';
import TruncateLabel from './TruncateLabel.vue';
import WithIcons from './WithIcons.vue';
import Demo from './Demo.vue';
export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Demo</h5>
            <Demo />
          </div>
          <div class='block-'>
            <h5 class='title'>ButtonAlignment</h5>
            <ButtonAlignment />
          </div>
          <div class='block-'>
            <h5 class='title'>ButtonDesign</h5>
            <ButtonDesign />
          </div>
          <div class='block-'>
            <h5 class='title'>ButtonPadding</h5>
            <ButtonPadding />
          </div>
          <div class='block-'>
            <h5 class='title'>ButtonSize</h5>
            <ButtonSize />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomColor</h5>
            <CustomColor />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomContent</h5>
            <CustomContent />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomRipple</h5>
            <CustomRipple />
          </div>
          <div class='block-'>
            <h5 class='title'>DeterministicProgress</h5>
            <DeterministicProgress />
          </div>
          <div class='block-'>
            <h5 class='title'>Disabled</h5>
            <Disabled />
          </div>
          <div class='block-'>
            <h5 class='title'>FormSubmission</h5>
            <FormSubmission />
          </div>
          <div class='block-'>
            <h5 class='title'>IndeterminateProgress</h5>
            <IndeterminateProgress />
          </div>
          <div class='block-'>
            <h5 class='title'>Links</h5>
            <Links />
          </div>
          <div class='block-'>
            <h5 class='title'>LinksWithGo</h5>
            <LinksWithGo />
          </div>
          <div class='block-'>
            <h5 class='title'>OtherOptions</h5>
            <OtherOptions />
          </div>
          <div class='block-'>
            <h5 class='title'>Round</h5>
            <Round />
          </div>
          <div class='block-'>
            <h5 class='title'>RouterLinkExample</h5>
            <RouterLinkExample />
          </div>
          <div class='block-'>
            <h5 class='title'>Square</h5>
            <Square />
          </div>
          <div class='block-'>
            <h5 class='title'>Standard</h5>
            <Standard />
          </div>
          <div class='block-'>
            <h5 class='title'>TruncateLabel</h5>
            <TruncateLabel />
          </div>
          <div class='block-'>
            <h5 class='title'>WithIcons</h5>
            <WithIcons />
          </div>
        </div>
      );
    };
  },
});
